<template>
	<div class="search-header">
		<div class="search-header-left">
			<input
				type="text"
				id="search-input"
				v-model="searchVal"
				:placeholder="placeholder"
				@focus="jumpTo(jumpToPath)"
			/>
			<img
				v-if="searchVal"
				src="./images/clear_search_val.svg"
				@click="clearSearhVal"
			/>
			<img v-else src="./images/search.svg" @click="search" />
		</div>
		<div class="search-header-right">
			<span v-if="isSearch && curComponent === 'AppSearch'" @click="jumpTo(returnTo)">{{
				$t('common.cancel', '取消')
			}}</span>
			<img src="./images/change_lang.svg" v-else @click="switchLanguage" />
		</div>
	</div>
</template>
<script setup lang="ts">
import { onMounted, watch } from 'vue'
import useSearchHeader from './hooks/useSearchHeader'
// import { t } from '@/entry_mobile/locales/index'
import { i18n } from '@/locales'
const { $t } = i18n
const props = defineProps(['placeholder', 'jumpToPath', 'returnTo'])
const emits = defineEmits(['changeComponent', 'search'])
const {
	isSearch,
	searchVal,
	jumpTo,
	curComponent,
	switchLanguage,
	search,
	clearSearhVal,
} = useSearchHeader(emits)
watch(
	() => curComponent.value,
	newVal => {
		isSearch.value = newVal === props.jumpToPath
	},
	{
		immediate: true,
		deep: true,
	}
)
</script>
<style lang="less" scoped>
.search-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 52px;
	padding: 8px 16px;
	background-color: #fff;
	box-shadow: 0px 2px 6px rgba(31, 35, 41, 0.05);
	&-left {
		flex: 1;
		display: flex;
		align-items: center;
		height: 36px;
		margin: 0;
		background: #f2f4f7;
		border-radius: 4px;
		padding: 0 12px;
		input {
			border: 0;
			width: 100%;
			height: 100%;
			background-color: inherit;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 13px;
			&::placeholder {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 13px;
				line-height: 20px;
				color: #8f959e;
				width: 250px;
			}
		}
		img {
			height: 14px;
		}
	}
	&-right {
		span {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 14px;
			line-height: 100%;
			text-align: center;
			color: @rok-mobile-primary-color;
			margin-left: 12px;
		}
		img {
			width: 24px;
			margin-left: 20px;
		}
	}
}
</style>
